<template>
	<el-row :gutter="10" class="serverContentRow" type="flex">
		<el-col :span="4" :xl="3" class="textServerBox" style="display: none">
			<div class="gradientBox">
				<p class="titleText">服务器列表</p>
				<div class="showTextBtnBox">
					<i class="el-icon-s-grid" :class="{ showMode: showTextMode == 'icon' }"
						@click="showText('icon')"></i>
					<i class="el-icon-more" :class="{ showMode: showTextMode == 'text' }" @click="showText('text')"></i>
				</div>
				<v-TextServer @clickMonID="getClickMonID"></v-TextServer>
			</div>
		</el-col>
		<el-col :span="24" :xl="24" class="mainBox">
			<el-row :gutter="10" class="leftRow">
				<el-col :span="6" class="leftRow-twoBox">
					<div class="gradientBox">
						<p class="titleText">基本信息</p>
						<v-SerBasicInformation></v-SerBasicInformation>
					</div>
					<div class="gradientBox">
						<p class="titleText">状态信息</p>
						<v-StateInformation></v-StateInformation>
					</div>
				</el-col>
				<el-col :span="18" class="rightRow">
					<el-row :gutter="10" class="serverTopRow">
						<el-col :span="12" class="serverTopRow-threeBox">
							<div class="gradientBox">
								<p class="titleText">CPU Load</p>
								<v-CpuLoad></v-CpuLoad>
							</div>
							<div class="gradientBox">
								<p class="titleText">内存使用信息</p>
								<v-ServerMemoryLoad></v-ServerMemoryLoad>
							</div>
							<div class="gradientBox">
								<p class="titleText">交换空间</p>
								<v-IoLoad></v-IoLoad>
							</div>
						</el-col>
						<el-col :span="12" class="serverTopRow-twoBox">
							<div class="gradientBox">
								<p class="titleText">网络负载</p>
								<v-NetLoad></v-NetLoad>
							</div>
							<div class="gradientBox">
								<p class="titleText">文件系统信息</p>
								<v-ServerFileSystemImfor></v-ServerFileSystemImfor>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="serverDownRow">
						<el-col :span="24" class="serverDownRow-oneBox">
							<div class="gradientBox">
								<p class="titleText">告警日志</p>
								<v-ServerAlarmLog></v-ServerAlarmLog>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import vTextServer from "./TextServer.vue";
	import vCpuLoad from "./CpuLoad.vue";
	import vServerMemoryLoad from "./ServerMemoryLoad.vue";
	import vIoLoad from "./IoLoad.vue";
	import vNetLoad from "./NetLoad.vue";
	import vServerFileSystemImfor from "./ServerFileSystemImfor.vue";
	import vServerAlarmLog from "./ServerAlarmLog.vue";
	import vSerBasicInformation from "./SerBasicInformation.vue";
	import vStateInformation from "./StateInformation.vue";

	export default {
		name: "serverPage",
		components: {
			vTextServer,
			vCpuLoad,
			vServerMemoryLoad,
			vIoLoad,
			vNetLoad,
			vServerFileSystemImfor,
			vServerAlarmLog,
			vSerBasicInformation,
			vStateInformation,
		},
		beforeRouteEnter(to, from, next) {
			// if (from.path != "/NodeUsability") {
			//   next("/NodeUsability");
			// }
			next();
		},
		data() {
			return {
				selectedMonID: {},
				showTextMode: "icon",
			};
		},
		created() {},
		methods: {
			getClickMonID(val) {
				this.selectedMonID = val;
				bus.$emit("selectedMonIDServer", this.selectedMonID);
			},
			showText(val) {
				switch (val) {
					case "icon":
						this.showTextMode = "icon";
						bus.$emit("showText", "icon");
						break;
					case "text":
						this.showTextMode = "text";
						bus.$emit("showText", "text");
						break;

					default:
						break;
				}
			},
		},
		beforeDestroy() {},
	};
</script>

<style scoped>
	.serverContentRow {
		height: 100%;
		color: aliceblue;
		min-height: 896px;
		overflow-y: scroll;
	}

	.titleText {
		width: 60%;
		margin: 0 auto 8px auto;
		border-radius: 20px;
		box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
		line-height: 22px;
	}

	.showTextBtnBox {
		position: absolute;
		top: 10px;
		right: 0;
		padding-right: 3px;
	}

	.showTextBtnBox i {
		margin-right: 3px;
		cursor: pointer;
	}

	.showTextBtnBox i.showMode {
		color: #67c23a;
	}

	.gradientBox {
		position: relative;
		padding: 7px 10px;
		margin-bottom: 10px;
		overflow: hidden;
		text-align: center;
		border-radius: 5px;
		box-shadow: 0px 0px 24px rgb(1, 40, 107) inset !important;
	}

	.gradientBox:last-child {
		margin-bottom: 0;
	}

	/* 服务器列表 */
	.textServerBox .gradientBox {
		max-height: calc(100% - 7px * 2);
	}

	.mainBox .leftRow {
		height: 100%;
	}

	.leftRow .rightRow {
		height: 100%;
	}

	.leftRow>div {
		height: 100%;
	}

	.serverTopRow>div {
		height: 100%;
	}

	.rightRow .serverTopRow {
		height: 80%;
		/* margin-bottom: 10px; */
	}

	.rightRow .serverDownRow {
		height: calc(20% - 10px) !important;
	}

	/* CPU、内存、交换空间 */
	.serverTopRow-threeBox .gradientBox {
		height: calc(100% / 3 - 6px * 3 - 20px / 3);
	}

	/* 网络负载、文件系统信息 */
	.serverTopRow-twoBox .gradientBox {
		height: calc(100% / 2 - 7px * 2 - 20px / 2);
	}

	/* 右下角告警日志 */
	.serverDownRow>div {
		height: 100%;
	}

	.serverDownRow-oneBox .gradientBox {
		height: calc(100% - 7px * 2);
	}

	/* 基本信息与状态信息 */
	.leftRow-twoBox .gradientBox {
		height: calc(100% / 2 - 7px * 2 - 20px / 2);
	}
</style>
